<!-- 加班详情 -->
<template>
  <el-dialog v-model="dialogFormVisible" :title="title" width="500" destroy-on-close draggable @closed="handlerClosed">
    <div v-if="tableData.length > 0">
      <el-form-item label="加班日期："> {{ tableData[0].overtimeDate }} </el-form-item>
      <el-form-item label="项目名称："> {{ tableData[0].projectName }} </el-form-item>
      <el-form-item label="加班时间："> {{ tableData[0].startTime }} - {{ tableData[0].endTime }} </el-form-item>
      <el-form-item label="加班原因："> {{ tableData[0].reason }} </el-form-item>
      <el-form-item label="加班流程：">
        <div style="text-align: left" v-html="tableData[0].overtimeProcess"></div>
      </el-form-item>
      <el-form-item label="加班状态：">
        <OvertimeStatusTag :status="tableData[0].overtimeStatus" />
      </el-form-item>
    </div>
  </el-dialog>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import OvertimeStatusTag from '../Overtime/OvertimeStatusTag.vue'

const dialogFormVisible = ref(false)
const title = ref('')
const tableData = ref<any[]>([])

/**
 * 当处理器关闭时调用的函数
 */
const handlerClosed = () => {
  tableData.value = []
  title.value = ''
}

const open = (row: any, columnName: string) => {
  dialogFormVisible.value = true
  title.value = `${row.nickName} ${columnName} 的加班信息`
  tableData.value = row.OvertimeList.filter((item: any) => item.overtimeDate === columnName)
}

defineExpose({ open })
</script>
<style lang="scss" scoped>
.cells {
  display: flex;
  flex-wrap: wrap;

  .cell {
    margin: 5px;
  }
}
</style>
